<template>
    <ElTreeSelect ref="treeSelect" v-model="menuIds" :data="sysMenuVOTree" node-key="id" show-checkbox multiple
        :props="{ label: 'name', children: 'children' }" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElTreeSelect } from "element-plus";
import type { SysMenuVO } from "@/api/sysMenu/sysMenuType";
import { queryMenuAllTree } from "@/api/sysMenu/sysMenu";

/**
 * 首页组件名，在分配权限时必须至少选中首页
 */
const homeComponent = "Home"
/**
 * 选中的菜单id列表
 */
const menuIds = defineModel<string[]>()
/**
 * 菜单树
 */
const sysMenuVOTree = ref<SysMenuVO[]>()

onMounted(async () => {
    sysMenuVOTree.value = await queryMenuAllTree()
    sysMenuVOTree.value.forEach(sysMenuVO => {
        // 在分配权限时必须至少选中首页
        if (sysMenuVO.component == homeComponent) {
            if (sysMenuVO.id && !menuIds.value?.length) {
                menuIds.value = [sysMenuVO.id]
            }
            (sysMenuVO as (SysMenuVO & { disabled: boolean })).disabled = true
        }
    })
})
</script>

<style scoped lang="scss"></style>
